<template>
  <el-card class="card_box">
    <template #header>
      <div class="router_list_query">
        <el-form
          :inline="true"
          label-position="left"
          :model="routerListQuery"
          class="demo-form-inline"
        >
          <el-form-item label="菜单名称：">
            <el-input
              v-model="routerListQuery.menuName"
              clearable
              placeholder="菜单名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="菜单路径：">
            <el-input
              v-model="routerListQuery.path"
              clearable
              placeholder="菜单路径"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitQuery">查询</el-button>
            <el-button type="primary" @click="addRouter">
              <span
                class="iconify"
                data-icon="subway:add-1"
                data-width="10"
              ></span>
              添加路由
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </template>
    <!--  table (START) -->
    <a-table :config="config" :columns="columns" :dataSource="dataSource">
      <template #sort="scope">
        {{ scope.row.sort }}
      </template>
      <template #status="scope">
        <el-switch
          v-model="scope.row.meta.hide"
          @change="changeMenuStatus(scope.row.id, scope.row.meta.hide)"
        />
      </template>

      <template #icon="scope">
        <span
          class="iconify"
          :data-icon="scope.row.meta.icon"
          data-width="20"
        />
      </template>
      <template #level="scope">
        <el-tag v-if="scope.row.level == 1">一级路由</el-tag>
        <el-tag type="success" v-else-if="scope.row.level == 2">
          二级路由
        </el-tag>
      </template>
      <template #operation="scope">
        <el-button
          size="small"
          type="primary"
          @click="modifyRouter(scope.row.id)"
        >
          编辑
        </el-button>
        <el-button
          size="small"
          type="danger"
          @click="deleteRouter(scope.row.id)"
        >
          删除
        </el-button>
      </template>
    </a-table>
    <!-- table (END) -->
  </el-card>
</template>
<script lang="ts" setup>
import { onMounted, ref, reactive, Ref, h } from 'vue'
import { useRoute, useRouter } from 'vue-router'

import { ElMessage } from 'element-plus'

import {
  getRouterListApi,
  deleteRouterApi,
  updateRouterMeunStatusApi,
} from '@/api/router'
import Sortable from 'sortablejs'
import { useRouteStore } from '@/store/modules/routeStore'
import ATable from '@/components/ATable.vue'
import { columnsTypes, configTypes } from '@/interface/ATable'

const routeStore = useRouteStore()
const router = useRouter()
onMounted(() => {
  getRouterList()
  // sortTableIndex()
})

const routerListQuery = reactive({
  path: '',
  menuName: '',
})
// 点击根据条件查询路由列表
const submitQuery = () => {
  getRouterList()
}
// ? 跳转到添加路由页面
const addRouter = () => {
  router.push('/router/add')
}

const changeMenuStatus = async (id: string, hide: boolean) => {
  let res: any = await updateRouterMeunStatusApi(id, hide)
  if (res.status == 0) {
    ElMessage.success(res.msg)
    routeStore.setRoutes()
  }
}

// ? 跳转到修改路由页面
const modifyRouter = (id: string) => {
  router.push({
    path: '/router/modify',
    query: {
      id,
    },
  })
}

// ? 删除路由的方法
const deleteRouter = async (id: string) => {
  let res: any = await deleteRouterApi(id)
  console.log(res)
  if (res.status === 0) {
    ElMessage.success('删除路由成功')
    routeStore.setRoutes()
    getRouterList()
  }
}
const columns = ref<columnsTypes[]>([
  {
    type: 'selection',
    align: 'center',
    width: 60,
  },
  {
    prop: 'meta.title',
    label: '菜单名称',
    align: 'center',
    width: 220,
  },
  {
    prop: 'name',
    label: '路由名称',
    align: 'center',
    'show-overflow-tooltip': true,
  },
  {
    prop: 'path',
    label: '跳转路径',
    align: 'center',
    'show-overflow-tooltip': true,
  },
  {
    prop: 'component',
    label: '组件路径',
    align: 'center',
    'show-overflow-tooltip': true,
  },
  {
    slot: 'sort',
    label: 'sort排序',
    align: 'center',
    width: 100,
  },
  {
    slot: 'status',
    label: '隐藏菜单',
    align: 'center',
    width: 100,
  },
  {
    slot: 'icon',
    label: '菜单图标',
    align: 'center',
    width: 100,
  },
  {
    slot: 'level',
    label: '层级',
    align: 'center',
    width: 120,
  },
  {
    slot: 'operation',
    label: '操作',
    align: 'center',
    width: 160,
  },
])
const config = ref<configTypes>({
  stripe: true,
  border: true,
  fit: true,
  size: 'large',
  'current-row-key': 'id',
  'highlight-current-row': true,
  'empty-text': '没有数据',
  'row-class-name': () => 'rowClassName',
  'cell-class-name': () => 'cellClassName',
  'row-key': 'id',
  'tooltip-effect': 'light',
  'select-on-indeterminate': true,
  indent: 16,
  lazy: true,
  loading: false,
})
const dataSource = ref([])
// ? 获取路由列表的方法
const getRouterList = async () => {
  config.value.loading = true
  var res: any = await getRouterListApi(routerListQuery)
  if (res.status === 0) {
    dataSource.value = res.data
    config.value.loading = false
  }
}
</script>
<style></style>
<style lang="scss" scoped>
:deep(.el-card__header) {
  padding: calc(var(--el-card-padding) - 2px) var(--el-card-padding) 0;
}

.card_box {
  margin: $mainMargin;
}
</style>
